<template>
	<div>
		<el-container>
		  <el-header>
			  <div class="header">
				  <div class="header_left">
					  人人快速开发平台
				  </div>
				  <div class="header_right">
					  <el-menu class="el-menu-demo" mode="horizontal">
					    <el-menu-item index="1">new</el-menu-item>
						 <el-menu-item index="1">git源码</el-menu-item>
						  <el-menu-item index="1">处理中心</el-menu-item>
					    <el-submenu index="2">
					      <template slot="title">admin</template>
					      <el-menu-item index="2-1">修改密码</el-menu-item>
					      <el-menu-item index="2-2" @click="out">退出</el-menu-item>
					    </el-submenu>
					  </el-menu>
				  </div>
			  </div>
		  </el-header>
		  <el-main>
			  <el-aside width="1200px" router>
				<el-row class="tac">
			  <el-col :span="4">
			      <el-menu
					default-active="/首页"
					@select="handleSelect"
			        class="el-menu-vertical-demo"
			        background-color="#545c64"
			        text-color="#fff"
			        active-text-color="#ffd04b">
					<el-menu-item index="/首页">
					  <i class="el-icon-menu"></i>
					  <span slot="title">首页</span>
					</el-menu-item>
			        <el-submenu index="2">
			          <template slot="title">
			            <i class="el-icon-location"></i>
			            <span>demo</span>
			          </template>
			          <el-menu-item-group>
			            <el-menu-item index="/echart">echarts</el-menu-item>
			            <el-menu-item index="/ueditor">ueditor</el-menu-item>
			          </el-menu-item-group>
			        </el-submenu>
					<el-submenu index="3">
					  <template slot="title">
					    <i class="el-icon-location"></i>
					    <span>管理系统</span>
					  </template>
					  <el-menu-item-group>
					    <el-menu-item index="/管理员列表">管理员列表</el-menu-item>
					    <el-menu-item index="/角色管理">角色管理</el-menu-item>
						<el-menu-item index="/菜单管理">菜单管理</el-menu-item>
						<el-menu-item index="/SQL监控">SQL监控</el-menu-item>
						<el-menu-item index="/定时任务">定时任务</el-menu-item>
						<el-menu-item index="/参数管理">参数管理</el-menu-item>
						<el-menu-item index="/文件上传">文件上传</el-menu-item>
						<el-menu-item index="/系统日志">系统日志</el-menu-item>
					  </el-menu-item-group>
					</el-submenu>
			      </el-menu>
			    </el-col>
				</el-row>
				</el-aside>
		  </el-main>
		</el-container>

		<div class="router">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			handleSelect(key, keyPath) {
				console.log(key);
				this.$router.push(key);
			},
			out(){
				localStorage.removeItem("token")
				this.$router.go(0)
			}
		}
	}
</script>

<style scoped>
	 .el-header, .el-footer {
	    /* background-color: #B3C0D1; */
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		border-bottom: 1px solid #DCDCDC;
	  }
	  
	 .header
	 {
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	 }
	 
	 .header_left
	 {
		 /* color: #fff; */
	 }
	 
	 .router{
		 margin-left: 250px;
	 }
</style>
